<!--分区域-->
<template>
  <div class="pages-content">
    <div class="operation">
      <h2>{{moment(month).format('YYYY年MM月')}}产品分地市收入趋势：总体收入情况</h2>
      <img class="logoBg" src="~@/assets/images/common/fiveG.png" alt="">
    </div>

    <div class="pages-content-tips">
      <div class="text-block" ref="text-block">
        <div class="text-block-item">
          标品“冲锋”行动累计收入<span >{{thisIncomeTotal}}</span>亿元，省内总体预算完成率{{totalComplteleRate}}。
        </div>
        <div class="text-block-item">
          完成率：<span style="color:green">{{completeRateBegin}}</span>前三,<span style="color:red">{{completeRateEnd}}</span>后三。
        </div>
        <div class="text-block-item">
          时序盈缺:重点省内预算时序缺口{{gapOfBudgetLjTotal}}万,其中<span style="color:green">{{completeGap}}</span>超时序完成预算，重点关注：<span style="color:red">{{timeGapBudget}}</span>。
        </div>
      </div>
      <div class="echarts-block" ref="echarts-block">
        <barCanvas :echartsObj="echartsObj"></barCanvas>
      </div>
    </div>
    <div class="tableBox">
      <el-table v-loading="tableLoading" :data="tableData" style="width: 100%" class="tableTh28" border stripe ref="table" size="mini" :span-method="arraySpanMethod" :cell-style="cellStyle">
                 <el-table-column show-overflow-tooltip  prop="标品冲锋完成情况" label="标品冲锋完成情况" min-width="120px"   ></el-table-column>
          <el-table-column show-overflow-tooltip  prop="总计" label="总计" min-width="120px" ></el-table-column>
        <el-table-column show-overflow-tooltip :prop="item.prop" :label="item.label" v-for="(item,idx) in column" :key="idx" :width="width[idx]">
          <template slot-scope="scope">
            <span>{{scope.row[item.prop]}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";

let accountInfo = JSON.parse(getSessionStorage("accountInfo"));

import barCanvas from "./barCanvas";

export default {
  components: {
    barCanvas,
  },
  data() {
    return {
      form: {
        areaId: accountInfo.areaId,
        month: "",
      },
      accountInfo: "",
      tableLoading: false,
      count: "",
      tableData: [],
      column: [],
      width: [],
      month: "",
      echartsObj: {},
      thisIncomeTotal:'',
      totalComplteleRate:'',
      completeRateBegin:'',
      completeGap:'',
      timeGapBudget:'',
      gapOfBudgetLjTotal:''
    };
  },
  methods: {
    async setWidth() {
      await this.$nextTick();
      let elWidth1 = this.$refs["text-block"].clientWidth;
      let elWidth2 = this.$refs["echarts-block"].clientWidth;
      this.column.forEach((i) => {
        if (i.label == "标品冲锋完成情况" || i.label == "总计") {
          let width = elWidth1 / 2;
          this.width.push(width);
        } else {
          let width = elWidth2 / 11;
          this.width.push(width);
        }
      });
    },
    cellStyle({ row, rowIndex, column }) {
      if (row["标品冲锋完成情况"] == "完成率") {
        // console.log("row, rowIndex: ", row, rowIndex);
        console.log("column: ", column);
        let rowArray = Object.keys(row)
          .filter((i) => i != "标品冲锋完成情况" && i != "总计")
          .map((i) => {
            return {
              name: i,
              val: parseFloat(row[i]),
            };
          })
          .sort((a, b) => {
            return a.val - b.val;
          });

        let style = {};
        rowArray.forEach((i, idx) => {
          if (
            (i.name == column.label && idx == 0) ||
            (i.name == column.label && idx == 1) ||
            (i.name == column.label && idx == 2)
          ) {
            style.color = "red";
          } else if (
            (i.name == column.label && idx == rowArray.length - 1) ||
            (i.name == column.label && idx == rowArray.length - 2) ||
            (i.name == column.label && idx == rowArray.length - 3)
          ) {
            style.color = "red";
          }
        });

        return style;
      }
    },
    init(month) {
      this.month = month;
      $budgetAPI.listCloudStandardTwo(
        {
          month,
        },
        (res) => {
          this.column = res.content.areaNames.map((i) => {
            let obj = {
              label: i,
              prop: i,
            };
            return obj;
          });

          this.setWidth();
          console.log(res,"-------")
          this.tableData = res.content.standardTrendList;
          this.thisIncomeTotal = res.content.thisIncomeTotal,
          this.totalComplteleRate = res.content.totalComplteleRate,
          this.completeRateBegin = res.content.completeRateBegin,
          this.completeRateEnd = res.content.completeRateEnd,
          this.completeGap = res.content.completeGap,
          this.gapOfBudgetLjTotal = res.content.gapOfBudgetLjTotal,
          this.timeGapBudget = res.content.timeGapBudget,



          this.echartsObj = {
            xdata: res.content.areaNames,
            barData: res.content.gapOfBudgetLj,
            lineData: res.content.completeRate.map((i) => parseFloat(i)),
          };
        }
      );
    },

    //table合并行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 && this.count) {
        if (rowIndex % this.count === 0) {
          return {
            colspan: 1,
            rowspan: this.count,
          };
        } else {
          return {
            colspan: 0,
            rowspan: 0,
          };
        }
      }
    },
    //区域选择 返回ID和name
    areaChange(event) {
      // let temp = this.areaList.find(item => {
      //   return (item.areaId = event);
      // });
      // this.form.areaId = event;
      // this.form.areaName = temp.areaName;
    },
    //根据层级获取区域树
    // getCompanyByLvl() {
    //   $budgetAPI.getCompanyByLvl(
    //     {
    //       lvl: this.accountInfo.areaLvl,
    //       areaId: this.accountInfo.areaId
    //     },
    //     res => {
    //       if (res.code == 0) {
    //         this.areaList = res.content;
    //       } else {
    //         this.alertError(res);
    //       }
    //     },
    //     err => {}
    //   );
    // }
    getMaxAcctMonthByArea() {
      $budgetAPI.getMaxAcctMonthByArea(
        {},
        (res) => {
          if (res && res.code == 0) {
            this.form.month = res.content;
            this.init();
          }
        },
        (err) => {}
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.pages-content {
  border: 1px solid #dee5f3;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;

  .operation {
    font-size: 16px;
    padding-bottom: 20px;
    position: relative;
    h2 {
      color: #fff;
      display: inline-block;
      background: #2f6eba;
      border-radius: 20px;
      padding: 5px 20px;
    }
    img {
      position: absolute;
      right: 20px;
      top: 0px;
    }
  }
}

.pages-content-tips {
  display: flex;
  // padding-bottom: 20px;

  .text-block {
    flex-basis: 30%;
    background-color: #f5f7fd;
    padding: 20px 20px 20px 30px;
    // border-radius: 10px;
    font-size: 14px;
    .text-block-item {
      // height: 25px;
      line-height: 30px;
    }
  }
  .echarts-block {
    flex-basis: calc(100% - 30%);
    min-height: 280px;
    border: 1px solid #1f497d;
    border-bottom: 0;
  }
}
</style>
